<template>
  <div class="mate-remote-outer">
    <div class="left-panel">
      <tree-db @select-tree-node="selectTreeNode"></tree-db>
    </div>
    <div class="content-panel" ref="contentRef">
      <Tabs class="tabs-large" :value="curTab" @on-click="changeTab">
        <Tab-pane label="表结构" name="tab_desc"></Tab-pane>
        <Tab-pane label="表数据" name="tab_data"></Tab-pane>
      </Tabs>
      <div v-show="curTab === 'tab_desc'" class="the-bar">tab_desc</div>
      <div v-show="curTab === 'tab_data'" class="the-bar">
        <div class="the-bar-item">
          <div>表名：</div>
          <div style="width: 160px">{{ curMenu }}</div>
        </div>
        <div class="the-bar-item">
          <div>总数：</div>
          <div style="width: 40px">{{ curTotal }}</div>
        </div>
        <!-- <select-search
          ref="selectSearch"
          :selectId="'idcLocationSearch'"
          :keyList="dataColumn"
          :loading="dataLoading"
          :invisibleKey="invisibleKey"
          @on-change="searchFilter"
          style="width: 600px"
        >
        </select-search> -->
        <div style="flex-grow: 1"></div>
        <Button class="top-btn" @click="openInsertDialog" title="导入">导入</Button>
        <Button class="top-btn" @click="exportData" title="导出">导出</Button>
        <Button class="top-btn" @click="refresh" title="刷新">刷新</Button>
      </div>
      <div style="height: calc(100% - 100px); padding: 0 16px; overflow-y: auto">
        <Table v-show="curTab === 'tab_desc'" :data="curDesc" :columns="descColumn" :loading="descLoading"></Table>
        <Table
          v-show="curTab === 'tab_data'"
          :data="curData"
          :columns="dataColumn"
          :loading="dataLoading"
          ref="dataTableRef"
        >
          <!-- 循环所有文本框的column -->
          <template v-for="columnObj in dataColumnTextarea" slot-scope="{ row }" :slot="columnObj.slot">
            <Input v-model="row.content" type="textarea" :rows="2" style="width: 100%" :key="columnObj.key" />
          </template>
        </Table>
      </div>
    </div>
    <load-data-dialog ref="dialogRef"></load-data-dialog>
  </div>
</template>

<script>
import { format } from 'date-fns';
import MateDbConst from './MateDbConst';
import TreeDb from './TreeDb.vue';
import { countTable, insertData, queryTable } from '../base/mateDbUtil';
import LoadDataDialog from './LoadDataDialog.vue';

export default {
  components: { TreeDb, LoadDataDialog },
  name: 'MateDb',
  data() {
    return {
      curNode: null,

      fileList: [],
      curFile: {
        name: null,
      },

      curHeight: 600,

      // ----

      invisibleKey: ['createTime', 'updateTime'],

      descColumn: MateDbConst.descColumn,
      descLoading: false,
      dataLoading: false,

      curTab: 'tab_desc',
      curMenu: null,
      curDesc: [],
      dataColumn: [],
      curData: [],
      curTotal: 0,
      curFilter: [],

      searchList: [],
    };
  },
  computed: {
    dataColumnTextarea: function () {
      return this.dataColumn.filter(item => {
        return item.showType === 'textarea';
      });
    },
  },
  methods: {
    openInsertDialog() {
      this.$refs.dialogRef.openDialog('获取表数据').then(retStr => {
        const paramObj = JSON.parse(retStr);
        insertData(this.curDbInfo, this.curNode.title, paramObj).then(retObj => {
          if (retObj) {
            this.$Message.success('数据添加成功: ' + retObj);
            this.refresh();
          }
        });
      });
    },
    formatDate(param) {
      return format(new Date(param), 'YYYY/MM/DD HH:mm');
    },
    formatSize(param) {
      return (param / 1024).toFixed(0) + ' KB';
    },
    selectTreeNode(curNode) {
      this.curNode = curNode;
      // 获取file
      if (curNode.nodeType === 'file') {
        this.curFile = curNode.fileInfo;
      } else if (curNode.nodeType === 'root') {
        this.fileList = curNode.children.map(item => {
          return item.fileInfo;
        });
      } else {
        this.fileList = curNode.children.map(item => {
          return item.fileInfo;
        });

        this.curMenu = curNode.title;
        this.curTotal = null;
        this.curFilter = [];
        // this.$refs.selectSearch.removeAll();
        this.queryDesc(this.curMenu);

        if (this.curTab === 'tab_data') {
          this.queryData(this.curMenu);
          this.queryTotal(this.curMenu);
        }
      }
    },
    calcCurHeight() {
      this.curHeight = this.$refs.contentRef.clientHeight;
    },

    // ----

    exportData() {
      const filename = 'aaa';
      this.$refs.dataTableRef.exportCsv({
        filename,
        columns: this.dataColumn.filter(item => {
          return item.key !== 'content';
        }),
        data: this.curData,
      });
    },
    refresh() {
      this.queryData(this.curMenu);
      this.queryTotal(this.curMenu);
    },
    changeTab(paramObj) {
      this.curTab = paramObj;
      if (this.curMenu) {
        this.execTab();
      }
    },
    execTab() {
      if (this.curTab === 'tab_data') {
        this.queryData(this.curMenu);
        this.queryTotal(this.curMenu);
      } else if (this.curTab === 'tab_desc') {
        this.queryDesc(this.curMenu);
      }
    },
    // webhome_0.1
    // fitExt(srcObj, keyArray) {
    //   const cfgMap = {
    //     'tenddata.user_account_content.content': {
    //       showType: 'textarea',
    //     },
    //     'tenddata.user_dashboard.content': {
    //       showType: 'textarea',
    //     },
    //   };
    //   const keyStr = keyArray.join('.');
    //   if (cfgMap[keyStr]) {
    //     const tmpCfg = cfgMap[keyStr];
    //     srcObj['slot'] = keyArray[2];
    //     srcObj['showType'] = tmpCfg.showType;
    //     srcObj['width'] = 160;
    //   }
    // },
    queryDesc(paramObj) {
      this.fileList;

      this.curDesc = this.fileList.map(item => {
        const retObj = {
          name: item.name,
          type: item.type,
        };
        return retObj;
      });
      this.dataColumn = this.fileList.map(item => {
        const retObj = {
          key: item.name,
          title: item.name,
        };
        return retObj;
      });
    },
    queryData(paramObj) {
      this.dataLoading = true;
      queryTable(this.curDbInfo, paramObj, null).then(retObj => {
        this.dataLoading = false;
        this.curData = retObj;
      });
    },
    queryTotal(paramObj) {
      countTable(this.curDbInfo, paramObj, null).then(retObj => {
        this.curTotal = retObj;
      });
    },
    // searchFilter(paramObj) {
    //   this.curFilter = {};
    //   paramObj.forEach(item => {
    //     this.curFilter[item.key] = item.value;
    //   });

    //   this.queryData(this.curMenu);
    //   this.queryTotal(this.curMenu);
    // },
  },

  mounted() {
    this.calcCurHeight();
  },
};
</script>

<style scoped>
.mate-remote-outer {
  display: flex;
}
.left-panel {
  height: 100%;
  width: 240px;
  border-right: 1px solid #cccccc;
}
.content-panel {
  height: 100%;
  width: calc(100% - 240px);
}

/* ---- */

.the-bar {
  display: flex;
  height: 32px;
  line-height: 24px;
  padding: 0 16px;
  margin-bottom: 16px;
}

.the-bar-item {
  display: flex;
  line-height: 32px;
  margin-right: 8px;
}

.top-btn {
  /* width: 40px; */
  margin-right: 4px;
}
</style>
